<template>
  <div>
    <ol class="breadcrumb-nav">
  			<li>
  				<a href="/admin.html">主页</a>
  			</li>
  			<li>
  				<a v-link="{path:'/articleList'}">文章列表</a>
  			</li>
  			<li>
  				添加文章
  			</li>
  		</ol>
      <!--文章form-->
      <form class="x-ui-form form pd-20">
        <!--标题-->
  			<div class="row cl">
  				<label class="form-label col-2">标题</label>
  				<div class="col-10">
  					<input type="text" v-model="article.title" class="input-text"/>
  				</div>
  			</div>
        <!--栏目-->
  			<div class="row cl">
  				<label class="form-label col-2">栏目</label>
  				<div class="col-10">
            <select v-model="article.column">
              <option v-for="data in column" value="{{data._id}}">{{data.name}}</option>
            </select>
  				</div>
  			</div>
        <!--作者-->
  			<div class="row cl">
  				<label class="form-label col-2">作者</label>
  				<div class="col-10">
  					<input type="text" v-model="article.author" class="input-text"/>
  				</div>
  			</div>
        <!--来源-->
  			<div class="row cl">
  				<label class="form-label col-2">来源</label>
  				<div class="col-10">
  					<input type="text" v-model="article.source" class="input-text"/>
  				</div>
  			</div>
  			<!--简介-->
  			<div class="row cl">
  				<label class="form-label col-12 text-l">文章简介</label>
  				<div class="col-12">
  					<textarea class="textarea" v-model="article.briefing" placeholder="请输入简介"></textarea>
  				</div>
  			</div>
  			<!--内容-->
  			<div class="row cl">
  				<label class="form-label col-12 text-l">内容</label>
  				<div class="col-12">
  					<textarea style="width:100%;height:500px;" v-model="article.content" id="content-text" placeholder="请输入内容"></textarea>
  				</div>
  			</div>
        <!--发布-->
        <div @click="releaseArticle" class="btn btn-submit">发布</div>
      </form>
      <!--弹窗组件-->
      <xui-modal type="alert" :show.sync="alert" fname="submit">发布成功</xui-modal>
  </div>
</template>
<script>
  var	xuiModal = require("../../components/public/XuiModal.vue");
  export default{
    data(){
      return {
        article:{},
        alert:false,
        column:""
      }
    },
    methods:{
      releaseArticle:function(){
        var th = this;
        this.$http.post("/addArticle" , th.article, function(res){
          if(res.state == "ok"){
            th.alert = true;
          }else{
            alert(res.message);
          };
        },"JSON")
      }
    },
		route:{
			data(transition){
        var id = transition.to.query.id,
            th = this,
            column = "";
        //获取栏目
        this.$http.get("/columnList" , function(data){
          column = data.data;
          this.article.column = column[0]._id;
          if(id){
            this.$http.get("/articleDetails" , {id:id} , function(data){
    					transition.next({
                article:data.article,
                column:column
              });
    				},"JSON");
          }else{
            transition.next({column:column});
          };
        },"JSON");
      }
    },
    components:{
      xuiModal:xuiModal
    },
    created(){
      var th = this;
      this.$on("submit-choice" , function(){
        th.alert = false;
        th.$route.router.go("/");
      });
      this.$on("submit-close" , function(){
        th.alert = false;
        th.$route.router.go("/");
      });
    }
  };
</script>
<style>
  .textarea{margin-top:-1px;}
</style>
